<template>
  <div class="container">

    <i class="el-icon-caret-left" @click="zuo"></i>
    <div class="scrollX" ref="scrollBox">
      <div class="scroll_box" ref="refscroll">
        <div :class="highlightindex == index ? 'content2 content' : 'content'" v-for="(item, index) in spacesList" :key="index"
          @click="highlight(index, item)">{{ item.name }}</div>
      </div>
    </div>
    <i class="el-icon-caret-right" @click="you"></i>

  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import {
  reqSpaceManager,
} from "@/api/api";

export default {
  components: {
  },
  data() {
    return {
      scrollPosition: 0,
      list: [
        {
          name: "保安中心"
        }, {
          name: "保安中心"
        }, {
          name: "保安中心"
        }, {
          name: "11"
        }, {
          name: "保安中心"
        }, {
          name: "22"
        }, {
          name: "保安中心"
        }, {
          name: "44"
        }, {
          name: "保安中心"
        }, {
          name: "55"
        }, {
          name: "88"
        }, {
          name: "44"
        }, {
          name: "66"
        }, {
          name: "22"
        }, {
          name: "99"
        }, {
          name: "44"
        }, {
          name: "保安中心"
        }, {
          name: "55"
        }, {
          name: "保安中心"
        }, {
          name: "保安中心"
        }, {
          name: "55"
        }, {
          name: "保安中心"
        }, {
          name: "保安中心"
        }
      ],
      scrollNum: 0,
      scrollBoxWidth: 0,//父级宽度
      highlightindex: 0,
      spacesList: []
    };
  },
  computed: {
    ...mapState(["user", "datav"])
  },
  watch: {
    "datav.floorFlag"(e) {
      // console.log(e);
      // 楼层为空
      if (this.datav.floorId == '') {
        this.spacesList = []
        // this.savespacesArr('')// 存储安装点id
        // this.savespacesFlag(!this.datav.spacesFlag)//监听安装点
        return;
      }
      if(this.datav.floorId==1){
        this.spacesList =[]
        return;//为1选择全部楼层
      }
      this.getreqParkList()
    }
  },
  methods: {
    ...mapMutations(["savespacesArr", "savespacesFlag"]),
    // 安装点列表
    async getreqParkList() {
      let res = await reqSpaceManager(1, 50, {
        userId: this.user.userId,
        roleName: this.user.roleName,
        orgId: this.datav.orgarr.id,//单位id
        parentId: this.datav.floorId,//楼层id
        metaCode: 3,
        isStatistics: 0
      });
      // console.log(res);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.spacesList = res.data.rows || []
      this.highlightindex = 0;
      this.scrollNum = 0;
      this.$refs.refscroll.style.transform = `translateX(-0px)`;//回0
      this.savespacesArr(this.spacesList.length != 0 ? this.spacesList[0] : {})// 存储安装点信息
      this.savespacesFlag(!this.datav.spacesFlag)//监听安装点
    },
    // 点击高亮
    highlight(index, e) {
      this.highlightindex = index
      this.savespacesArr(e)// 存储安装点信息
      this.savespacesFlag(!this.datav.spacesFlag)//监听安装点
    },
    // handleScroll(e) {
    //   console.log(e);
    //   var scrollNum = this.$refs.scrollBox;
    //   //deltaY属性在向下滚动时返回正值，向上滚动时返回负值，否则为0
    //   scrollNum.scrollLeft = scrollNum.scrollLeft + e.deltaY;
    // },
    you() {
      this.scrollNum += this.scrollBoxWidth //this.$refs.scrollBox.offsetWidth 屏幕一屏幕二切换时有bug
      if (this.scrollNum > this.$refs.refscroll.offsetWidth) {
        this.scrollNum += -this.scrollBoxWidth //this.$refs.scrollBox.offsetWidth
        return;
      }
      this.$refs.refscroll.style.transform = `translateX(-${this.scrollNum}px)`;
    },
    zuo() {
      // console.log(this.$refs.refscroll.offsetWidth);
      // console.log(this.$refs.scrollBox.offsetWidth);
      // console.log(this.scrollNum);
      if (this.scrollNum == 0) return;
      this.scrollNum -= this.scrollBoxWidth //this.$refs.scrollBox.offsetWidth
      this.$refs.refscroll.style.transform = `translateX(-${this.scrollNum}px)`;
    },

  },

  async mounted() {
    this.scrollBoxWidth = this.$refs.scrollBox.offsetWidth - 110;
  },
  created() {
  },
  destroyed() {

  },
};
</script>

<style lang="less" scoped>
.fontSize (@px, @attr: font-size) {
  @vw: (@px / 1920) * 100;
  @{attr}:~"@{vw}vw";
}

.container {
  color: #fff;
  padding: 0 20px;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  .fontSize(20);
  display: flex;
  align-items: center;

  >i {
    cursor: pointer;
  }

  .scrollX {
    width: 100%;
    overflow: hidden;
    padding: 0 10px;
    box-sizing: border-box;

    .scroll_box {
      // display: flex;
      display: inline-flex;
      transition: all 0.5s ease;

      .content {
        flex-shrink: 0;
        width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 30px;
        margin: 0 5px;
        text-align: center;
        .fontSize(12);
        border-radius: 5px;
        border: 1px solid transparent;
        box-sizing: border-box;
        cursor: pointer;
        user-select: none;
      }

      .content2 {
        border: 1px solid #00EDFE;
        box-sizing: border-box;
        background-color: #324DB8;
      }
    }

  }

}</style>
